<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    {% include 'system/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='system/admin/css/other/login.css') }}"/>
</head>
<body class="login-body" background="{{ url_for('static', filename='system/admin/images/background.svg') }}">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="{{ url_for('static', filename='system/admin/images/logo.png') }}"/>
        <div class="title">求职管理系统</div>
        <div class="desc">
        </div>
    </div>
    <div class="layui-form-item">
        <input name="username" type="text" placeholder="用户名" value="" hover class="layui-input"/>
    </div>
    <div class="layui-form-item">
        <input name="password" type="password" placeholder="密码" value="" hover class="layui-input"/>
    </div>
    {#    <div class="layui-form-item">#}
    {#        <input placeholder="验证码 : " name="captcha" hover class="code layui-input layui-input-inline"/>#}
    {#        <img src="{{ url_for('system.passport.get_captcha') }}" class="codeImage" id="captchaImage"/>#}
    {#    </div>#}
    <div class="layui-form-item">
        <input type="checkbox" name="remember-me" title="记住密码" lay-skin="primary">
    </div>
    <div class="layui-form-item">
        <button class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
            登 录
        </button>
    </div>


    <button class="layui-btn" lay-on="test-page-custom">点此注册</button>
{#    <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-custom">#}
{#        <span class="layui-badge-dot"></span> 注册#}
{#    </button>#}

</form>
{% include 'system/common/footer.html' %}
<script>
    layui.use(['form', 'jquery', 'layer', 'button', 'popup'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let button = layui.button;
        let popup = layui.popup;
        let captchaPath = "{{ url_for('system.passport.get_captcha') }}";
        var util = layui.util;
        // 事件
        util.on('lay-on', {
            'test-page-custom': function () {
                layer.open({
                    type: 1,
                    area: ['450px', '600px'],
                    {#resize: false,#}
                    shadeClose: true,
                    title: '注册',
                    content: `
          <div class="layui-form" lay-filter="filter-test-layer" style="margin-top: -50px">
            <div class="" style="margin-top: -50px">
               <div class="layui-form-item" style="margin-left: -80px">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入"
                               class="layui-input">
                    </div>
                </div>
               <div class="layui-form-item" style="margin-left: -80px">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item"  style="margin-left: -80px">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="title" autocomplete="off" placeholder="请输入"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item"  style="margin-left: -80px">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                     <div class="layui-col-md6">
                        <select class="layui-input" name="role">
                          <option value="4">求职者</option>
                          <option value="3">企业</option>
                        </select>
                      </div>
                    </div>
                </div>
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">注册</button>
              </div>
            </div>
          </div>
        `,
                    success: function () {
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        // 表单提交事件
                        form.on('submit(demo-login)', function (data) {
                            var field = data.field; // 获取表单字段值
                            data.field = {...data.field, 'action': 'register'}
                            // 显示填写结果，仅作演示用

                            $.ajax({
                                data: data.field,
                                type: "post",
                                dataType: 'json',
                                {#url: '{{ url_for('system.user.save') }}',#}
                                success: function (result) {
                                    layer.closeAll();
                                    layer.msg('注册成功');
                                }
                            });

                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
            }
        });


        /**
         * 刷新验证码函数
         */
        const refreshCaptchaImage = (function () {
            let captchaImage = document.getElementById("captchaImage")
            return function () {
                captchaImage.src = captchaPath + "?" + Math.random()
            }
        })()

        /**
         * 立即刷新验证码并且每隔 30秒 刷新
         */
        const initCaptchaImageTimer = (function () {
            let captchaImageTimer = null
            return function () {
                clearInterval(captchaImageTimer)
                captchaImageTimer = setInterval(function () {
                    refreshCaptchaImage()
                }, 30 * 1000);
                refreshCaptchaImage()
            }
        })()
        {#initCaptchaImageTimer()#}

        form.on('submit(login)', function (data) {
            console.log('login')
            console.log(data.field)
            let loader = layer.load();
            let btn = button.load({elem: '.login'});
            $.ajax({
                data: data.field,
                type: "post",
                dataType: 'json',
                success: function (result) {
                    layer.close(loader);
                    btn.stop(function () {
                        if (result.success) {
                            popup.success(result.msg, function () {
                                location.href = "{{ url_for('index.index') }}";
                            })
                        } else {
                            popup.failure(result.msg, function () {
                                initCaptchaImageTimer()
                            });
                        }
                    })
                }
            });
            return false;
        });


        $("#captchaImage").click(function () {
            initCaptchaImageTimer()
        });
    })
</script>
<script>
    if (window !== top) {
        top.location.href = location.href;
    }
</script>
</body>
</html>